<style>
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 1px solid #3399ff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

<template>
    <div class="table">
        <div class="table-body">
            <Row>
                <Col class="demo-tabs-style2">
                    <Tabs type="card">
                        <TabPane label="单选题">
                            <Row>
                                <Col span="7" offset="4">
                                    <Form ref="radioChoice" :model="radioChoice" :label-width="120" label-position="right" :rules="ruleQuestion">
                                        <FormItem label="题目数量" prop="num">
                                            <Input v-model.number="radioChoice.num" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem label="答对得分" prop="score">
                                            <Input v-model.number="radioChoice.score" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem hidden>
                                            <Input v-model='radioChoice.type'></Input>
                                        </FormItem>
                                        <FormItem label="每题答对获得学分" prop="points">
                                            <Input v-model.number="radioChoice.points" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem>
                                            <Button type="primary" @click="handleSubmit('radioChoice')">确认</Button>
                                            <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                                        </FormItem>
                                    </Form>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane label="多选题">
                            <Row>
                                <Col span="7" offset="4">
                                    <Form ref="multiChoice" :model="multiChoice" :label-width="120" label-position="right" :rules="ruleQuestion">
                                        <FormItem label="题目数量" prop="num">
                                            <Input v-model.number="multiChoice.num" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem label="答对得分" prop="score">
                                            <Input v-model.number="multiChoice.score" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem hidden>
                                            <Input v-model='multiChoice.type'></Input>
                                        </FormItem>
                                        <FormItem label="每题答对获得学分" prop="points">
                                            <Input v-model.number="multiChoice.points" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem>
                                            <Button type="primary" @click="handleSubmit('multiChoice')">确认</Button>
                                            <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                                        </FormItem>
                                    </Form>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane label="判断题">
                            <Row>
                                <Col span="7" offset="4">
                                    <Form ref="judge" :model="judge" :label-width="120" label-position="right" :rules="ruleQuestion">
                                        <FormItem label="题目数量" prop="num">
                                            <Input v-model.number="judge.num" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem label="答对得分" prop="score">
                                            <Input v-model.number="judge.score" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem hidden>
                                            <Input v-model='judge.type'></Input>
                                        </FormItem>
                                        <FormItem label="每题答对获得学分" prop="points">
                                            <Input v-model.number="judge.points" placeholder="请输入"></Input>
                                        </FormItem>
                                        <FormItem>
                                            <Button type="primary" @click="handleSubmit('judge')">确认</Button>
                                            <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                                        </FormItem>
                                    </Form>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane label="基本设置">
                            <Row>
                                <Col span="6" offset="4">
                                    <Form ref="basic" :model="basic" :label-width="120" :rules="ruleBasic">
                                        <FormItem label="考试时长" prop="value"> 
                                            <TimePicker confirm placeholder="Select time" :value="basic.value" @on-change="timeChange"></TimePicker>
                                        </FormItem>
                                        <FormItem>
                                            <Button type="primary" @click="handleSubmit('basic')">确认</Button>
                                            <!-- <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
                                        </FormItem>
                                    </Form>
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import http from '../../../libs/http';
export default {
    data () {
        return {
            basic: {
                name:'expire_time',
                value: ''
            },
            ruleBasic: {
                value: [{required: true, message:'考试时长不能为空', trigger: 'blur'}]
            },
            radioChoice: {
                num: '',
                score: '',
                points: '',
                type: 1
            },
            multiChoice: {
                num: '',
                score: '',
                points: '',
                type: 2
            },
            judge: {
                num: '',
                score: '',
                points: '',
                type: 3
            },
            ruleQuestion: {
                num: [{required: true, message:'题目数量不能为空', trigger: 'blur', type:'number'}],
                score: [{required: true, message:'每题的分数不能为空', trigger:'blur', type:'number'}],
                points: [{required: true, message:'每题正确可得学分不能为空', trigger:'blur', type:'number'}]
            },
        }
    },
    methods: {
        getList () {
            var that = this;
            var url = 'admin/test/question/config';
            this.apiGet(url).then((res) => {
                if (res.code != 200) {
                    this.handleError(res);
                } else {
                    that.basic = res.data.basic;
                    that.radioChoice = res.data.radio;
                    that.multiChoice = res.data.multi;
                    that.judge = res.data.judge;
                }
            })
        },
        timeChange (time) {
            this.basic.value = time;
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    var data = this.defineData(name);
                    var url = "admin/test/question/saveConfig";
                    this.apiPost(url, data).then((res) => {
                        if (res.code != 200) {
                            this.handleError(res);
                        } else {
                            
                            this.handleResData(res.data);
                            this.$Message.success('修改成功');
                        }
                    })
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        //定义data参数
        defineData(name) {
            if (name == 'basic') {
                var data = {
                    value: this.basic.value,
                }
            } else if (name == 'radioChoice') {
                var data = {
                    num: this.radioChoice.num,
                    score: this.radioChoice.score,
                    points: this.radioChoice.points,
                    type: this.radioChoice.type
                }
            } else if (name == 'multiChoice') {
                var data = {
                    num: this.multiChoice.num,
                    score: this.multiChoice.score,
                    points: this.multiChoice.points,
                    type: this.multiChoice.type
                }
            } else if (name == 'judge') {
                var data = {
                    num: this.judge.num,
                    score: this.judge.score,
                    points: this.judge.points,
                    type: this.judge.type
                }
            }
            return data;
        },
        //处理修改后的结果
        handleResData(data) {
            if (data.type == 1) {
                this.radioChoice = data;
            } else if (data.type == 2) {
                this.multiChoice = data;
            } else if (data.type == 3) {
                this.judge = data;
            } else {
                this.basic = data;
            }
        }
    },
    created () {
        this.getList();
    },
    mixins: [http]
}
</script>